<template>
  <div class="page-padding">
    <p class="font-normal">客流报表</p>
    <van-tabs class="passengerflowanalysis-tab"
      v-model="activeTab"
      background="#f7f8fa"
      line-width="24px"
    >
      <van-tab title="进店人数"></van-tab>
      <van-tab title="进店人次"></van-tab>
    </van-tabs>
    <div class="counter-warp">
      <div class="counter">
        <p>14</p>
        <p>今日进店人数</p>
      </div>
      <div class="sequential">
        <img  class="sequential-icon" src="../../assets/images/downturn.svg" alt="" srcset="">
        <span class="sequential-text">环比</span>
      </div>
      <div class="sequential-num">
        <span>54.8</span>
        <span>%</span>
      </div>
    </div>
    <div class="video-warp">
     <span>视频接入</span>
    </div>
    <div ref="table1" class="table1"></div>
    <p class="font-normal">客流时间分布</p>
    <p class="font-normal font-small">最近7天客流时间段分布</p>
    <van-tabs class="passengerflowanalysis-tab"
      v-model="activeTab2"
      background="#f7f8fa"
      line-width="24px"
    >
      <van-tab title="进店人数"></van-tab>
      <van-tab title="进店人次"></van-tab>
    </van-tabs>
    <div ref="table2" class="table1"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {
  Tab,
  Tabs,
} from 'vant';

export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
  },
  data() {
    return {
      activeTab: 0,
      activeTab2: 0,
    };
  },
  mounted() {
    let myChart = echarts.init(this.$refs.table1);
    let option = {
      color: ['rgba(31, 31, 241, 0.829)', 'rgb(73, 245, 222)'],
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        bottom: 0,
        data: ['本期人数', '上期人数'],
      },
      xAxis: {
        type: 'category',
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: ['17日', '18日', '19日', '20日', '21日', '22日', '23日'],
      },
      yAxis: {
        type: 'value',
        min: 15,
        max: 40,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      series: [
        {
          name: '本期人数',
          data: [28, 17, 22, 19, 30, 34, 25],
          type: 'line',
          smooth: true,
        },
        {
          name: '上期人数',
          data: [30, 34, 25, 28, 17, 22, 19],
          type: 'line',
          smooth: true,
        },
      ],
    };
    myChart.setOption(option);
    let myChart2 = echarts.init(this.$refs.table2);
    let option2 = {
      color: ['rgba(31, 31, 241, 0.829)', 'rgb(73, 245, 222)'],
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        bottom: 0,
        data: ['本期人数', '上期人数'],
      },
      xAxis: {
        type: 'category',
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: ['8点', '10点', '12点', '14点', '16点', '18点', '20点'],
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 7,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      series: [
        {
          name: '本期人数',
          data: [3, 7, 2, 1, 3, 4, 0],
          type: 'line',
          smooth: true,
        },
        {
          name: '上期人数',
          data: [3, 4, 5, 2, 1, 2, 0],
          type: 'line',
          smooth: true,
        },
      ],
    };
    myChart2.setOption(option2);
  },
};

</script>

<style scoped>
  @import url('../../assets/styles/index.css');

  .font-normal {
    font-size: 18px;
    color: rgb(66, 65, 65, 0.8);
    margin: 10px 0px;
  }
  .font-small {
    font-size: 16px;
  }
  .passengerflowanalysis-tab{
    width: 60vw;
    margin: 8px auto;
  }

  .counter-warp{
    display: flex;
  }
  .counter-warp .counter{
    width: 50vw;
  }
  .counter-warp .counter p:first-child{
    border-right: 1.5px solid rgb(66, 65, 65, 0.8);
    text-align: center;
    line-height: 8vh;
    height: 8vh;
    font-size: 40px;
    color: rgb(66, 65, 65, 0.8);
  }
  .counter-warp .counter p:nth-child(2){
    color: rgb(66, 65, 65, 0.8);
    font-size: 14px;
    text-align: center;
  }
  .counter-warp .sequential{
    margin-left: auto;
    width: 10vw;
  }
   .counter-warp .sequential-num{
    width: 25vw;
    margin-right: auto;
  }
  .counter-warp .sequential-num span:nth-child(1){
    text-align: center;
    line-height: 8vh;
    height: 8vh;
    font-size: 40px;
  }
  .sequential{
    position: relative;
  }
  .sequential-icon{
    position: absolute;
    right: 4px;
    height: 60px;
    width: 20px;
  }
  .sequential-text{
    position: absolute;
    right: 4px;
    bottom: 0px;
    font-size: 14px;
    color: rgb(66, 65, 65, 0.8);
  }
  .video-warp{
    vertical-align: middle;
    text-align: center;
    height: 15vh;
  }
  .video-warp::before{
    content: '';
    line-height: 15vh;
  }
  .table1{
    height: 40vh;
  }
</style>
<style>
.passengerflowanalysis-tab .van-tab--active {
  font-weight: bolder;
  font-size: 18px;
}
.passengerflowanalysis-tab .van-tabs__line{
  background-color: rgba(31, 31, 241, 0.829);
}
</style>
